


<template>
<v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}"  >
<div style="position:relative;width: 100%;height:100%; ">
   <img src="../assets/img/showPrize2.png" class="backimg">

   <!-- logo -->
   <div style="position:absolute;display:block;width:90%;left:7%;top:0%">
     <div class="logo">
      <!-- <img style="position:absolute;display:block;width:12%;left:0%;" src="../assets/img/logo_1.png">
      <img style="position:absolute;display:block;width:28%;left:16%;" src="../assets/img/logo_2.png"> -->
      <img style="position:absolute;display:block;width:4%;right:5%" src="../assets/img/guanbi.png" @click="backhome">
    </div>
   </div>

   <div style="position:absolute;display:block;width:70px;height:80px;left:75%;top:23%;z-index:5">
       <img style="display:block;width:100%" src="../assets/img/pic5.png">
   </div>

   <!-- votecontent -->
   <div style="position:absolute;display:block;width:100%;height:78%;left:0%;top:22%;">

     <div class=" flex-column1" style=" width: 100%; height:100%;">

          <!-- 投票用户展示3-->
          <div class="showInfo2" style="width:90%;height:-webkit-fit-content; ">
              <div class="flex-column2" style="position:relative;width: 150px;height:30px; top: calc(5% - 15px);background:linear-gradient(0deg,rgba(124,102,254,1) 0%,rgba(145,113,254,1) 100%);border-radius:18px;z-index:2;"> 
              <span style="color: white;font-size: 13px;">宣贯会现场中奖名单</span>
              </div>

              <div class="flex-column2" style="width:90%;height:80%">
                  <div class="top-message" style="margin-top: 5%;"> 
                    <img src="../assets/img/Prize1.png" style="height:80%">
                    <span style="color:rgba(255,180,0,1);font-size: 14px;">超级幸运奖 2名</span>
                 </div>
                 <span v-for="(prize,index) in allPrize1 " :key="'1'+index" style="color:black;">{{prize.USERNAME}} {{subMobile(prize.USERMOBILE)}}  </span>
                 
                 <div class="top-message"> 
                    <img src="../assets/img/Prize2.png" style="height:80%">
                    <span style="color:rgba(255,180,0,1);font-size: 14px;">Web端人气幸运奖 3名</span>
                 </div>
                 <span v-for="(prize,index) in allPrize2 " :key="'2'+index" style="color:black;">{{prize.USERNAME}} {{subMobile(prize.USERMOBILE)}}  </span>

                 <div class="top-message"> 
                    <img src="../assets/img/Prize2.png" style="height:80%">
                    <span style="color:rgba(255,180,0,1);font-size: 14px;">移动端人气幸运奖 4名</span>
                 </div>
                 <span v-for="(prize,index) in allPrize3 " :key="'3'+index" style="color:black;">{{prize.USERNAME}} {{subMobile(prize.USERMOBILE)}}  </span>
              </div>
            
          </div>       

          <div class="showInfo2" style="width:90%;height:-webkit-fit-content;">
              <div class="flex-column2" style="position:relative;width: 150px;height:30px; top: calc(5% - 15px);background:linear-gradient(0deg,rgba(124,102,254,1) 0%,rgba(145,113,254,1) 100%);border-radius:18px;z-index:2;"> 
              <span style="color: white;font-size: 13px;">获胜幸运奖名单</span>
              </div>

              <div class="flex-column2" style="width:90%;height:80%">
                  
                 <!-- 获胜幸运奖 -->
                 <div class="top-message"> 
                    <img src="../assets/img/Prize2.png" style="height:80%">
                    <span style="color:rgba(255,180,0,1);font-size: 16px;">Web端获胜幸运奖 6名</span>
                 </div>
                 <span v-show="allPrize4.length==0" style="font-size:14px;">11月5号揭晓，敬请期待！</span>
                 <span v-for="(prize,index) in allPrize4 " :key="'4'+index" style="color:black;">{{prize.USERNAME}} {{subMobile(prize.USERMOBILE)}}  </span>

                 <div class="top-message"> 
                    <img src="../assets/img/Prize2.png" style="height:80%">
                    <span style="color:rgba(255,180,0,1);font-size: 16px;">移动端获胜幸运奖 6名</span>
                 </div>
                 <span v-show="allPrize5.length==0" style="font-size:14px;">11月5号揭晓，敬请期待！</span>
                 <span v-for="(prize,index) in allPrize5 " :key="'5'+index" style="color:black;">{{prize.USERNAME}} {{subMobile(prize.USERMOBILE)}}  </span>
              </div>
            
          </div>   
            

     </div>  
   </div>



</div>

</v-touch>
</template>

<script>
import { } from "vux";
export default {
  name: "vote",
  // inject:['reload'],
  components: {

  },

  data() {
    return {
      allPrize1:[],
      allPrize2:[],
      allPrize3:[],
      allPrize4:[],
      allPrize5:[],


    };
  },

  mounted() {
    this.getVote();

  },

  methods: {
    
    onSwipeRight() {
      this.$router.push("home");
    },
    backhome() {
      this.$router.push("home");
    },
    // 获取投票信息
    getVote() {
      let paramsMD5 = '{"_method":"HOME_FIX_PERMISSION_MENU.getPrizeInfo"' + ',"filter":'+'""'+"}";
      this.$ajax({
        methods: "post",
        url: this.COMMON_URL,
        // params: params,
        // params: this.signMD5({ FixJSON: paramsMD5 }),
        params: { FixJSON: paramsMD5 },
        async: false
      }).then(res => {
        this.allPrize1 = res.data.allPrize.filter(element => {
          return element.POSITION=="1";            //获取数据库中标志为“1”的所有记录，也就是获得了一等奖的用户信息
        });
        this.allPrize2 = res.data.allPrize.filter(element => {
          return element.POSITION=="2";
        });
        this.allPrize3 = res.data.allPrize.filter(element => {
          return element.POSITION=="3";
        });
        this.allPrize4=res.data.allPrize.filter(element => {
          return element.POSITION=="4";
        });
        this.allPrize5=res.data.allPrize.filter(element => {
          return element.POSITION=="5";
        });
        
      });
    },
    // 隐藏用户详细电话号码
    subMobile(mobile){
      return mobile.substring(0,3)+"****"+mobile.substring(7,11)
    }
   

  },

  computed: {
    
  },

  watch: {}
};
</script>

<style scoped>
.flex-column1{
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: center;
}
.flex-column2{
  display:flex;
  flex-direction:column;
  justify-content: space-around;
  align-items: center;
}

.backimg{
  display:block;
  width: 100%;
  height: 100%
}
.logo{
  position:relative;
  height: 60px;
  width: 100%;
  display:flex;
  flex-direction:row;
  align-items: center;
}

.showInfo2{
  position:relative;
  width: 100%;
  height:auto; 
  display:flex;
  flex-direction:column;
  align-items: center;
  background: url('../assets/img/bottom1.png') no-repeat;
  background-size: 100% 100%;

  z-index:1
}


.title{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  top:3%;
}
.top-message{
  height: 15%;
  width: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
  align-items: center;
}

div{
  text-align: center;
  font-size: 12px;
}
/* html{
  height:100%;
  background-color: #557dea !important;
} */

</style>

